<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>


<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
<head>
<link href="<c:url value="/bootstrap/css/bootstrap.min.css"/>"
	rel="stylesheet">
<link href="<c:url value="/bootstrap/css/datepicker.css"/>" rel="stylesheet">	
<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/styles.css" />">
<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/ad-gallery/jquery.ad-gallery.css" />">

<script type="text/javascript"
	src='<c:url value="/resources/js/jquery-1.11.1.min.js" />'></script>
<script type="text/javascript"
	src='<c:url value="/resources/js/jquery.ad-gallery.js" />'></script>
<meta charset="utf-8">
<script src="<c:url value="/bootstrap/js/bootstrap.min.js"/>"></script>
<script src="<c:url value="/bootstrap/js/bootstrap-datepicker.js"/>"></script>
<title>Travel Journal</title>
</head>
<body>
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
		<div id="sidebar">
			<ul>
				<li><a href="/TravelJournal/welcome">Home</a></li>
				<li><a href="/TravelJournal/records/myrecords">My Records</a></li>
				<li><a href="/TravelJournal/records/addrecord">Add Record</a></li>
				<li><a href="/TravelJournal/records/map">My Travel Map</a></li>
			</ul>
		</div>
		<div id="main-content">

			<c:if test="${not empty error}">
				<div class="error">${error}</div>
			</c:if>

			<h2>Edit Travel Record</h2>

			<form:form method="post" commandName="travelRecord" role="form" onsubmit="return validate();">
				<form:hidden path="id" />
				<div class="form-group">
					<form:label path="country">Country:</form:label>

					<form:select id="country" path="country" class="form-control">
					</form:select>
				</div>
				<div class="form-group">
					<form:label path="city">City:</form:label>
					<form:select id="city" path="city" class="form-control">
						<form:option value="">City</form:option>
					</form:select>
				</div>
				
				<div class="form-group">
						<label>Start Date</label>
						<div class="input-group date">
					    <form:input id="startDate" path="startDate" type="text" class="form-control"/><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					    </div>
					</div>
					<div class="form-group">
						<label>End Date</label>
						<div class="input-group date">
					    <form:input id="endDate" path="endDate" type="text" class="form-control"  /><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					    </div>
					</div>
				
				<input type="hidden" id="countryId" value="${travelRecord.country}">
				<input type="hidden" id="cityId" value="${travelRecord.city}">
				<input type="hidden" id="startDateH" value = "<fmt:formatDate value='${travelRecord.startDate}'  type='date' pattern='MM/dd/yyyy'/>" />
				<input type="hidden" id="endDateH" value = "<fmt:formatDate value='${travelRecord.endDate}'  type='date' pattern='MM/dd/yyyy'/>"/>
				<input id='submitButton' type="submit" value="Save" class="btn" />
			</form:form>
			<br />
			<h4>Notes:</h4>
			
					<button type="button" class="btn"
						onclick="goToAddNotes(${travelRecord.id})">Add Notes</button>
			<c:if test="${not empty notes}">
				<div>
					
					
					<table class="table table-hover">
						<tr>
							<th>Title</th>
							<th>Note</th>
							<th>&nbsp;</th>
						</tr>
						<c:forEach items="${notes}" var="note">
							<tr>

								<td>${note.title}</td>

								<td>${note.note}</td>
								<td>
								<button type="button" class="btn" onclick="editNote(${note.id},${travelRecord.id})">Edit</button>
								<button type="button" class="btn" onclick="deleteNote(${note.id},${travelRecord.id})">Delete</button>
								
								</td>
							</tr>
						</c:forEach>
					</table>
				</div>
			</c:if>

			



			<c:if test="${not empty images}">

				<div id="carousel-example-generic" class="carousel slide"
					data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0"
							class="active"></li>
						<c:forEach var="i" begin="1" end="${images.size()-1}">
							<li data-target="#carousel-example-generic" data-slide-to="i"></li>

						</c:forEach>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img
								src="/TravelJournal/images/imageDisplay?id=${images.get(0).id}"
								alt="...">
							<div class="carousel-caption">${images.get(0).description}
							</div>
						</div>
						<c:forEach var="i" begin="1" end="${images.size()-1}">
							<div class="item">
								<img
									src="/TravelJournal/images/imageDisplay?id=${images.get(i).id}"
									alt="...">
								<div class="carousel-caption">
									<h3>${images.get(i).title}</h3>
   									<p>${images.get(i).description}</p>
								
								</div>
							</div>
						</c:forEach>

					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic"
						role="button" data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#carousel-example-generic"
						role="button" data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</c:if>

			<button type="button" class="btn"
				onclick="goToAddImages(${travelRecord.id})">Add Images</button>

		</div>



	</div>

	<script type="text/javascript">
	function goToAddNotes(id){
		window.location.href="/TravelJournal/record/" + id +"/notes/addnote";
	}
	
	function goToAddImages(id){
		window.location.href="/TravelJournal/images/uploadFile/" + id;
	}
	
	function editNote(id, recordId){
		window.location.href="/TravelJournal/record/" + recordId + "/notes/editnote/" + id;
	}
	
	function deleteNote(id, recordId){
		window.location.href="/TravelJournal/record/" + recordId + "/notes/deletenote/" + id;
	}
	
	function validate(){
		$('#city').parent().removeClass("has-error");
		$('#country').parent().removeClass("has-error");
		$('#startDate').parent().removeClass("has-error");
		$('#endDate').parent().removeClass("has-error");
		var returnVal = true;
		if($('#startDate').val() == ''){
			$('#startDate').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#endDate').val() == ''){
			$('#endDate').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#city').val() == ''){
			$('#city').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#country').val() == ''){
			$('#country').parent().addClass("has-error");
			returnVal = false;
		}
		return returnVal;
	}
	
		$(document).ready(
				function() {
					

					 $('.input-group.date').datepicker({
					    });
					 
					 /* if($.trim($("#startDateH").val()) != ''){
					 	$('#startDate').datepicker('update', $("#startDateH").val());
					 }
					 else{
						 $('#startDate').datepicker('update', new Date());
					 }
					 if($.trim($("#endDateH").val()) != ''){
					 	$('#endDate').datepicker('update', $("#endDateH").val());
					 }
					 else{
						 $('#endDate').datepicker('update', new Date());
					 } */
					 
					$.getJSON('/TravelJournal/location/countries', {
						ajax : 'true'
					}, function(data) {
						var html = '<option value="">Country</option>';
						var len = data.length;
						for (var i = 0; i < len; i++) {
							html += '<option value="' + data[i].code + '">'
									+ data[i].name + '</option>';
						}
						html += '</option>';
						//now that we have our options, give them to our select
						$('#country').html(html);
						$(
								'#country option[value="'
										+ $('#countryId').val() + '"]').attr(
								'selected', 'selected');

						$.getJSON('/TravelJournal/location/cities/'
								+ $('#countryId').val(), {

							ajax : 'true'
						}, function(data) {
							var html = '<option value="">City</option>';
							var len = data.length;
							for (var i = 0; i < len; i++) {
								html += '<option value="' + data[i].id + '">'
										+ data[i].name + '</option>';
							}
							html += '</option>';

							$('#city').html(html);

							$(
									'#city option[value="' + $('#cityId').val()
											+ '"]')
									.attr('selected', 'selected');
						});
					});
				});

		$(document)
				.ready(
						function() {
							$('#country')
									.change(
											function() {
												$
														.getJSON(
																'/TravelJournal/location/cities/'
																		+ $(
																				this)
																				.val(),
																{

																	ajax : 'true'
																},
																function(data) {
																	var html = '<option value="">City</option>';
																	var len = data.length;
																	for (var i = 0; i < len; i++) {
																		html += '<option value="' + data[i].id + '">'
																				+ data[i].name
																				+ '</option>';
																	}
																	html += '</option>';

																	$('#city')
																			.html(
																					html);

																});
											});
						});

		
	</script>

</body>
</html>
